<template>
  <el-card>
    <div v-for="(item, index) in Categorys" :key="item.id">
      <el-checkbox
        class="title-category"
        v-model="checkAll[index]"
        :indeterminate="isIndeterminate[index]"
        @change="checked => handleCheckAllChange(checked, index)"
        >{{ item.name }}</el-checkbox
      >
      <el-checkbox-group v-model="checkedList[index]"
        @change="checkedList => handleCheckedResourceChange(checkedList, index)">
        <el-checkbox
          class="list"
          v-for="resource in item.resourceList"
          :key="resource.id"
          :label="resource.id"
          >{{ resource.name }}</el-checkbox
        >
      </el-checkbox-group>
    </div>
  </el-card>
</template>

<script>
import {
  getAllResource,
  getResourceCategory,
  getRoleResources
} from '@/services/resource'
export default {
  name: 'allocResource',
  props: {
    roleId: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      data: [],
      // 全选
      checkAll: [],
      // 选中的子项
      checkedList: [],
      // 半选中状态
      isIndeterminate: [],
      // 资源分类数据
      Categorys: [],
      // 所有资源数据
      CategoryLists: []
    }
  },
  created () {
    this.getallocResource()
    this.getRolesResource()
  },
  methods: {
    // 获取角色拥有的资源列表
    async getRolesResource () {
      const { data } = await getRoleResources(this.roleId)
      console.log(data)
      // if (data.code === '000000') {
      //   this.checkedList = data.data
      // }
    },
    // 获取所有资源
    async getallocResource () {
      const { data } = await getAllResource()
      if (data.code === '000000') {
        this.CategoryLists = data.data
        this.getallocResCategory()
      }
    },
    // 获取资源分类
    async getallocResCategory () {
      const { data } = await getResourceCategory()
      if (data.code === '000000') {
        this.Categorys = data.data
        this.assembleResourceList()
      }
    },
    // 处理两个数组之间对应关系
    assembleResourceList () {
      this.Categorys.map(item => {
        this.checkedList.push([])
        this.checkAll.push(false)
        this.isIndeterminate.push(false)
        item.resourceList = []
        this.CategoryLists.map(it => {
          if (it.categoryId === item.id) {
            item.resourceList.push(it)
          }
        })
      })
    },
    handleCheckAllChange (checked, index) {
      const resourceIdList = this.Categorys[index].resourceList.map(resource => { return resource.id })
      this.checkedList[index] = checked ? resourceIdList : []
      this.isIndeterminate[index] = false
    },
    handleCheckedResourceChange (checkedList, index) {
      const checkedCount = checkedList.length
      const targetResCount = this.Categorys[index].resourceList.length
      this.checkAll[index] = checkedCount === targetResCount
      this.isIndeterminate[index] = checkedCount > 0 && checkedCount < targetResCount
      this.$forceUpdate()
    }
  }
}
</script>

<style lang='scss' scoped>
.title-category {
  padding: 20px;
  border: 1px solid #dcdfe6;
  width: 100%;
  box-sizing: border-box;
  background: rgb(242, 246, 252);
}
.el-checkbox-group {
  border-left: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
  padding: 20px;
}
.list {
  width: 30%;
  padding: 4px 0;
}
</style>
